---
// Component Imports
import Counter from '../components/Counter.astro';

// Full Astro Component Syntax:
// https://docs.astro.build/basics/astro-components/
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<style>
			html,
			body {
				font-family: system-ui;
				margin: 0;
			}
			body {
				padding: 2rem;
			}
		</style>
	</head>
	<body>
		<main>
			<!-- Note: no `client:load` necessary since AlpineJS is always included -->
			<Counter>
				<h1>Hello, AlpineJS!</h1>
			</Counter>

			<!-- Note: pass props to Astro components to initialize Alpine with a certain state -->
			<Counter initialCount={5}>
				<h2>Use Astro to pass in server-side props</h2>
			</Counter>
		</main>
	</body>
</html>
